<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float浮动</title>
    <style>

        img.float1{
            float: right;

        }
        img.th{

            margin: 5px;
            float: left;

        }

        h2.clear_float{

            margin-bottom: 2px;
            clear: both;

        }

    </style>
</head>
<body>
<h2>浮动解释</h2>
<hr>
<ul style="list-style-type: square">
    <li>浮动只支持水平方向,即左右方向</li>
    <li>一个浮动元素会尽量向左或者向右移动,直到他的外边缘碰到包含框或者另一个浮动框的边框为止</li>
    <li>浮动之后的元素将围绕它,浮动之前的元素不受影响</li>
</ul>


<h2>图片浮动</h2>
<hr>
<p style="font-size: 25px;color: red">在下面的段落中,添加一个<b>float:right</b>的图片,导致图片将会浮动在段落的右边 </p>
<p style="font-size: 18px">
    <img class="float1" src="../../image/4.png" style="width: 100px;height: 100px">

    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

</p>
<hr>

<h2>彼此相邻的浮动元素</h2>
<hr>
<p>把几个浮动的元素放在一起,如果有空间的话,他们将彼此相邻</p>
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<img src="../../image/3.png" class="th"  width="100px" height="100px">
<hr>
<h2 class="clear_float">清除浮动</h2>
<hr>
<p>元素浮动后,周围元素会重新排列,为了避免这种情况,使用clear属性</p>
<p>这里清除h2的属性,不清除会排列在上面图片的右侧</p>







</body>
</html>